<template lang="pug">
  .page
    .AccountsReceivableManage
      .search-form.mb-10.pl-10.pr-10
        Form.ivu-row.ivu-form-basic(ref="formData" :model="formData" :rules="rules" :label-width="130")
          FormItem.form-item.ivu-col.pr-20.mb-15(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
            template(v-if="item.type === 'select'")
              Select(v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable)
                Option(
                  v-for="(c_item, index) in arrListDown[item.options]"
                  :value="c_item.label"
                  :key="index"
                ) {{ c_item.label }}
            template(v-if="item.type === 'input'")
              Input(v-model="formData[item.model]" :placeholder="item.placeholder")
            template(v-if="item.type === 'button'")
              Button(type="info" @click="searchFn") 查询

      .pl-20.pr-20.bg-white
        Table.beautiful-table(:columns="thead" :data="tableData" :stripe="true" ref="demoTable" @on-selection-change="handleOnSelectChange")
          .clearfix.font-16(slot="header")
            .table-title-lefttxt.pull-left
              |合计
              span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
              |条
            .pull-right.table-title-btns
              Button.mr-10(type="info" @click="handleShowCreateBankAccountModal(null)") 新增
          .clearfix.pl-20.pr-20(slot="footer")
            Page(
              :total="tableComone.totalRows"
              @on-change="onChangePage"
              @on-page-size-change="onpageSizeChange"
              show-sizer
              show-total
              placement="top"
              prev-text="上一页"
              next-text="下一页"
              :page-size-opts="[10, 20, 30, 50, 100]"
            )
          template(slot-scope="{ row, index }" slot="action")
            Button.mr-20(type="text" size="small" @click="handleShowSendTemplateModal(row)") 设置发放表模板
            Button.mr-10(type="text" size="small" @click="exportGrantData(row)") 发放模板下载
            Button.mr-10(type="text" size="small" @click="handleShowCreateBankAccountModal(row.id)") 编辑
            Button.mr-10(type="text" size="small"  v-if="!row.enabled" @click="enabledList(row.id, !row.enabled)") 启用
            Button.mr-10(type="text" size="small" v-if="row.enabled" @click="enabledList(row.id, !row.enabled)") 禁用
            Button(v-if="hasBind" type="text" size="small" @click="handleShowExportEmployeeModal(row)") 绑定客户

    //- 新建弹窗
    CreateBankAccountModal(ref="CreateBankAccountModal" @handleSubmit="searchFn")
    //- 设置模板弹窗
    SendTemplateModal(ref="SendTemplateModal" @handleSubmit="searchFn")
    //- 导出员工数据前弹窗
    ExportEmployeeModal(ref="ExportEmployeeModal")
</template>

<script>
import { Common } from '@/utils/common.js'
import { OrganizationBankApi } from '@/api/OrganizationBank.api.js'
import { FinanceSPayableApi } from '@/api/FinanceSPayable.api.js'
import { BankAccountThead } from './tableHead.js'
import _cloneDeep from 'clone-deep'
import CreateBankAccountModal from './modal/CreateBankAccountModal.vue'
import SendTemplateModal from './modal/SendTemplateModal.vue'
import ExportEmployeeModal from './modal/exportEmployeeModal.vue'
import { SysBasedataApi } from '@/api/SysBasedata.api.js'

export default {
  name: '', // 银行账号管理

  components: {
    CreateBankAccountModal,
    SendTemplateModal,
    ExportEmployeeModal
  },

  data () {
    return {
      companyId: '', // 公司ID
      companyName: '', // 公司名称
      employeeId: '', // 员工ID
      thead: _cloneDeep(BankAccountThead),
      tableData: [],
      selectedId: [], // 勾选的id集合,array格式
      selectedArr: [], // 勾选的id, name数组集合
      tableComone: {
        pageIndex: 1,
        totalRows: 0,
        pageSize: 10
      },
      formData: {
        organizationName: ''
      },
      formItem: [
        { type: 'input', label: '所属人力资源公司：', placeholder: '请选择所属人力资源公司', prop: 'organizationName', model: 'organizationName', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-9 ivu-col-span-xxl-6', options: 'tempOps' },
        { type: 'button', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-3 ivu-col-span-xxl-3' }
      ],
      rules: {},
      arrListDown: {
        tempOps: []
      },
      importFile: null
    }
  },
  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 核对完成
    hasBind () {
      return this.actionArr.indexOf('Bind') > -1
    },
  },

  mounted () {
    this.query()
    this.queryYingshe()
  },

  methods: {
    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      var params = {
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize
      }
      let res = await OrganizationBankApi.getList({ ...params, ...this.formData })
      console.log('获取列表res: ', res)
      if (res.status === 200 && res.data.success) {
        this.tableData = res.data.data
        this.tableComone.totalRows = res.data.totalRows
      } else {
        this.tableData = []
      }
      this.loading = false
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedArr = value.map((item) => {
        return { id: item.id, name: item.invoiceItem }
      })
      this.selectedId = value.map((item) => {
        return item.id
      })
      console.log('列表勾选数组1', this.selectedArr)
      console.log('列表勾选数组2', this.selectedId)
    },

    // 显示新增弹窗
    handleShowCreateBankAccountModal (id) {
      this.$refs.CreateBankAccountModal.show()
      this.$refs.CreateBankAccountModal.createBankAccountModalTitle = id ? '修改银行账号信息' : '新增银行账号信息'
      // this.$refs.CreateBankAccountModal.basicDataId = id
      this.$refs.CreateBankAccountModal.getModel(id)
    },

    // 启用/禁用
    async enabledList (id, enabled) {
      var params = {
        ids: id,
        enabled: enabled
      }
      let res = await OrganizationBankApi.enabledList(params)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.query()
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
      this.selectedId = []
      this.selectedIdArr = []
    },

    // 显示设置模板弹窗
    handleShowSendTemplateModal (row) {
      this.$refs.SendTemplateModal.show(row)
      this.$refs.SendTemplateModal.arrListDown = this.arrListDown
    },

    // 显示弹窗-选择员工
    handleShowExportEmployeeModal (row) {
      this.$refs.ExportEmployeeModal.bankId = row.id
      this.$refs.ExportEmployeeModal.show(row)
      this.$refs.ExportEmployeeModal.getCustomerNameList_noBind()
      this.$refs.ExportEmployeeModal.getCustomerNameList_bind()
    },

    // 获取映射下拉
    async queryYingshe () {
      var params = {
        PageIndex: 1,
        PageSize: 1000,
        // Code: 'FinanceGrantTemplate'
        typeName: '财务发放表模板'
      }
      let res = await SysBasedataApi.getList(params)
      if (res.status === 200 && res.data.success) {
        this.arrListDown.yingshe = res.data.data.map(item => {return {value: item.value, label: item.name}})
      } else {
        this.tableData = []
      }
      this.loading = false
    },

    // 发放模板下载
    async exportGrantData (row) {
      var params = {
        // SalaryID: row.id,
        // CompanyID: row.companyID,
        BankName: row.bankName,
        IsEmpty: true,
      }
      console.log('params: ', params)
      this.$refs.formData.validate((valid) => {
        if (valid) {
          console.log('提交表单', params)          
          FinanceSPayableApi.exportGrantData(params).then(res => {
            if (res.data.success) {
              this.isCanSubmit = false
              this.isShowChooseBankModal = false
              // this.$Message.success(res.data.message)
              window.open(baseUrl + res.data.message, '_blank')
            } else {
              this.isCanSubmit = true
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        }
      })
    }
  } // methods end
}
</script>

<style lang="less" scoped>

</style>
